<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '农商管理',
  },
}
</route>
<template>
  <div class="min-h-[100vh] py-10 px-8 box-border bg-[#f7f7f7] overflow-scroll pb-[64px]">
    <div class="text-[#333333] text-[24px]">用户注册</div>
    <div
      v-if="!model.address"
      class="mt-5 mb-5 py-4 box-border rounded-2 w-full flex gap-2 text-[#56b756] justify-center items-center bg-white border border-solid border-[#56b756]"
      @click="getLocation"
    >
      <image src="@/static/images/address.png" mode="widthFix" class="w-[14px]"></image>
      <span>选择注册地址</span>
    </div>
    <div
      v-else
      class="mt-5 mb-5 py-4 px-2 box-border rounded-2 w-full flex gap-2 text-[#666] justify-center items-center bg-white"
    >
      <div class="line-text" style="flex: 1">{{ model.address }}</div>
      <div
        class="py-1 px-2 flex justify-center items-center border border-solid border-[#56b756] rounded-1 text-[#56b756]"
        style="white-space: nowrap"
        @click="getLocation"
      >
        修改
      </div>
    </div>
    <wd-form ref="form" :model="model">
      <wd-cell-group>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label text-[#666] text-[16px]">详细地址</div>
          <wd-textarea
            label=""
            label-width="100px"
            prop="detailAddress"
            clearable
            custom-textarea-class="ns-textarea"
            v-model="model.detailAddress"
            placeholder="请输入详细地址"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px]">用户姓名</div>
          <div style="border-radius: 8px">
            <wd-input
              label=""
              label-width="100px"
              prop="name"
              clearable
              custom-class="custom-class-content"
              custom-input-class="ns-input"
              v-model="model.name"
              placeholder="请输入用户姓名"
              :rules="[{ required: true, message: '请填写用户姓名' }]"
            />
          </div>
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px] bg-[#f7f7f7]">
            手机号码
          </div>
          <wd-input
            label=""
            label-width="100px"
            prop="mobile"
            clearable
            custom-class="custom-class-content"
            custom-input-class="ns-input"
            v-model="model.mobile"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请填写手机号码' }]"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px]">验证码</div>
          <div class="flex items-center">
            <div class="form-control" style="flex: 1">
              <wd-input
                label=""
                label-width="100px"
                prop="code"
                clearable
                custom-class="custom-class-content"
                custom-input-class="ns-input"
                v-model="model.code"
                placeholder="请输入手机验证码"
                :rules="[{ required: true, message: '请填写手机验证码' }]"
              />
            </div>
            <div class="text-[#56b756] text-[12px]" style="margin-left: 13px" @click="getCode">{{ codeText }}</div>
          </div>
        </div>
      </wd-cell-group>
    </wd-form>
    <div class="mt-0 text-[15px] text-[#666666]">
      <wd-checkbox v-model="agree" shape="square">
        已阅读并同意
        <span class="text-[#56b756]" @click.stop="toProtocol">“用户服务协议”</span>
      </wd-checkbox>
    </div>
    <buttonBtn @btnClick="handleSubmit">
      <view>立即注册</view>
    </buttonBtn>
  </div>
  <NsOverlay v-model:visible="visible">
    <div class="text-center tip-text" style="padding-top: 134rpx; line-height: 48rpx">
      您需要阅读并同意
      <div class="text-[#56b756]" @click.stop="toProtocol">“用户服务协议”</div>
      才可以使用小程序
    </div>
  </NsOverlay>
  <!-- 成功弹窗 -->
  <NsOverlay
    v-model:visible="visibleSuccess"
    height="460rpx"
    footerTop="34rpx"
    okText="确定"
    buttonSize="small"
    :showCancel="false"
    @ok="onOk"
  >
    <div class="text-center tip-text" style="padding-top: 68rpx; line-height: 48rpx">
      <image src="@/static/images/check-success.png" mode="widthFix" class="w-[50px]"></image>
      <div class="mt-6 text-[#666]">注册成功</div>
    </div>
  </NsOverlay>
</template>

<script setup lang="ts">
import NsOverlay from '@/components/ns-overlay.vue'
import {register, sendCode} from '@/service/login'
import { useStorage } from '@/utils/storage'
import { useToast } from 'wot-design-uni'
const toast = useToast()
const { set, get, setToken } = useStorage()
function getLocation() {
  uni.getLocation({
    type: 'gcj02',
    success: function (success) {
      // 选择地点
      uni.chooseLocation({
        latitude: success.latitude,
        longitude: success.longitude,
        success: function (res) {
          console.log(res, '选择位置')
          model.address = res.address
        },
      })
    },
    complete: function () {},
  })
}

const model = reactive<IRegParams>({
  address: '',
  detailAddress: '',
  name: '',
  mobile: '',
  code: '',
  openid: '',
})

const form = ref()

function handleSubmit() {
  console.log(form.value)

  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        if (!agree.value) {
          visible.value = true
          return
        }
        // 注册
        const res: IResData<any> = await register(model)
        console.log(res, '注册')
        if (res.code === 1) {
          // toast.success('注册成功')
          visibleSuccess.value = true
          setToken(res.data.token)
          set('userInfo', res.data)
        } else {
          toast.show(res.msg)
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
function onOk() {
  uni.switchTab({
    url: '/pages/index/index',
  })
}
// 用户服务协议
const toProtocol = () => {
  uni.navigateTo({
    url: '/pages/protocol/index',
  })
}
const visible = ref(false)
const visibleSuccess = ref(false)
const agree = ref(false)
// 获取验证码
const codeText = ref('获取验证码')
const getCode = async () => {
  if (codeText.value !== '获取验证码') return
  // 手机号验证正则
  const reg = /^1[3456789]\d{9}$/
  if (!reg.test(model.mobile)) return toast.show('请输入正确的手机号')
  const res: IResData<any> = await sendCode(model.mobile)
  if (res.code === 1) {
    toast.show('验证码发送成功')
    let time = 30
    codeText.value = `${time}s后重新获取`
    const timer = setInterval(() => {
      time--
      if (time <= 0) {
        clearInterval(timer)
        codeText.value = '获取验证码'
      } else {
        codeText.value = `${time}s后重新获取`
      }
    }, 1000)
  }
}
onLoad(() => {
  const openid = get('openid')
  if (openid) model.openid = openid
})
</script>
<style scoped>
.form-label {
  margin-bottom: 20rpx;
}
.form-label-required {
  position: relative;
  padding-left: 8px;
}

.form-label-required::before {
  content: '*';
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 12px;
  color: #f61515;
}

:deep(.wd-textarea),
:deep(.wd-input) {
  border-radius: 16rpx !important;
}
</style>
